<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易图表 - Homalos量化交易系统</title>
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23409EFF'/%3E%3Cpath d='M8 12h4v8h-4zm6-4h4v12h-4zm6 2h4v10h-4z' fill='white'/%3E%3C/svg%3E">
    
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    
    <!-- 自定义样式 -->
    <style>
        body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f5f5; }
        .header { background: linear-gradient(135deg, #409EFF 0%, #1890ff 100%); color: white; padding: 1rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header-content { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
        .header-title h1 { margin: 0; font-size: 1.8rem; }
        .header-title p { margin: 0.5rem 0 0 0; opacity: 0.9; }
        .nav-menu { display: flex; gap: 1rem; }
        .nav-item { color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: background 0.3s; }
        .nav-item:hover { background: rgba(255,255,255,0.2); }
        .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
        .footer { background: #2c3e50; color: white; text-align: center; padding: 1rem 0; margin-top: 2rem; }
        .chart-container { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    </style>
    
    <!-- ECharts -->
    <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
    
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    
    <!-- Element Plus 图标 -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 页面头部 -->
        <header class="header">
            <div class="header-content">
                <div class="header-title">
                    <h1>📈 交易图表</h1>
                    <p>实时K线图表、交易信号和策略绩效监控</p>
                </div>
                <div class="header-nav">
                    <nav class="nav-menu">
                        <a href="/" class="nav-item">
                            <i class="el-icon-arrow-left"></i>
                            返回主页
                        </a>
                        <a href="/dashboard" class="nav-item" target="_blank">
                            <i class="el-icon-data-analysis"></i>
                            事件监控
                        </a>
                    </nav>
                </div>
            </div>
        </header>
        
        <!-- 主容器 -->
        <div class="container">
            <!-- 交易图表 -->
            <div class="chart-container">
                <h3>FG509 K线图表</h3>
                <div id="kline-chart" style="width: 100%; height: 500px;"></div>
                <div style="margin-top: 1rem;">
                    <button id="refresh-btn" class="el-button el-button--primary">刷新数据</button>
                    <span id="status-text" style="margin-left: 1rem; color: #666;">正在加载...</span>
                </div>
            </div>
        </div>
        
        <!-- 版权声明 -->
        <footer class="footer">
            <div class="footer-content">
                <p class="copyright">© 2024 Homalos量化交易系统. All rights reserved.</p>
            </div>
        </footer>
    </div>
    
    <!-- 图表页面脚本 -->
    <script>
        let chart = null;
        
        // 获取K线数据
        async function fetchKlineData() {
            try {
                const response = await fetch('/api/v1/market/kline?symbol=FG509&interval=1m&limit=50');
                const data = await response.json();
                
                if (data.success && data.data && data.data.length > 0) {
                    return data.data.map(item => [
                        item[0], // timestamp
                        item[1], // open
                        item[4], // close
                        item[3], // low
                        item[2], // high
                        item[5]  // volume
                    ]);
                } else {
                    console.warn('K线数据为空或格式错误:', data);
                    return [];
                }
            } catch (error) {
                console.error('获取K线数据失败:', error);
                return [];
            }
        }
        
        // 初始化图表
        function initChart() {
            const chartDom = document.getElementById('kline-chart');
            chart = echarts.init(chartDom);
            
            const option = {
                title: {
                    text: 'FG509 K线图表',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: function (params) {
                        const data = params[0].data;
                        return `时间: ${new Date(data[0]).toLocaleString()}<br/>
                                开盘: ${data[1]}<br/>
                                收盘: ${data[2]}<br/>
                                最低: ${data[3]}<br/>
                                最高: ${data[4]}<br/>
                                成交量: ${data[5]}`;
                    }
                },
                xAxis: {
                    type: 'time',
                    scale: true
                },
                yAxis: {
                    scale: true
                },
                series: [{
                    name: 'K线',
                    type: 'candlestick',
                    data: [],
                    itemStyle: {
                        color: '#ef232a',
                        color0: '#14b143',
                        borderColor: '#ef232a',
                        borderColor0: '#14b143'
                    }
                }]
            };
            
            chart.setOption(option);
        }
        
        // 更新图表数据
        async function updateChart() {
            const statusText = document.getElementById('status-text');
            statusText.textContent = '正在加载数据...';
            
            try {
                const klineData = await fetchKlineData();
                
                if (klineData.length > 0) {
                    chart.setOption({
                        series: [{
                            data: klineData
                        }]
                    });
                    statusText.textContent = `已加载 ${klineData.length} 条K线数据`;
                } else {
                    statusText.textContent = '暂无数据';
                }
            } catch (error) {
                console.error('更新图表失败:', error);
                statusText.textContent = '数据加载失败';
            }
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('初始化图表页面...');
            
            // 检查ECharts是否加载
            if (typeof echarts === 'undefined') {
                console.error('ECharts未加载');
                document.getElementById('status-text').textContent = 'ECharts加载失败';
                return;
            }
            
            // 初始化图表
            initChart();
            
            // 加载初始数据
            updateChart();
            
            // 绑定刷新按钮事件
            document.getElementById('refresh-btn').addEventListener('click', updateChart);
            
            // 窗口大小改变时重新调整图表
            window.addEventListener('resize', function() {
                if (chart) {
                    chart.resize();
                }
            });
            
            console.log('图表页面初始化完成');
        });
    </script>
</body>
</html>